<template>
  <div id="count-body">
    <!-- 计数组件，需要传入 最终值 字体颜色 -->
    {{ count }}
  </div>
</template>

<script>
export default {
  components: {},
  props: ["data"],
  data() {
    return {
      count: 0,
    };
  },
  mounted() {
    this.add();
  },
  watch:{
    data(newValue, oldValue){
      this.count = newValue;
    }
  },
  methods: {
    add() {
      // let el = document.getElementById("count-body");
      // el.style.color = this.color;
      if (this.count < 500 && this.count !== 0) {
        let _this = this;
        let interval = setInterval(function() {
          _this.count++;
          if (_this.count === _this.count) {
            clearInterval(interval);
          }
        }, 0.1);
      } else {
        this.count = this.data;
      }
    },
  },
};
</script>
<style lang="less" scoped>
#count-body {
  font-size: 60px;
  font-weight: 600;
  display: inline-block;
}
</style>
